@import '../common/common';
*{
	margin: 0;
	padding: 0;
}
@mixin inner {
	margin: 0 auto;
	width: 1200px;
}
body,html{
	height: 100%;
}

$width:100%;

#top{
	width: $width;
	height: 31px;
	background: #f8f8f8;
	.inner{
		@include inner;
		height: 31px;
		span{
			font-size: 12px;
			line-height: 31px;
			color:#646464 ;
			margin-right: 52px;
		}
		a{
			color:#646464 ;
			&:hover{
				color: #CD0A0A;
			}
		}

		ul{
			float: right;
			line-height: 31px;
			font-size: 12px;
			color:#646464 ;
			li{
				float: left;
				padding: 0 15px;
				&:hover{
					color: #CD0A0A;
					cursor: pointer;
				}
				position: relative;
			}
		}

	
	}
}

.tuichu{
	display: block;
	border: 1px solid #555555;
	width: 65px;
	height: 30px;
	line-height: 30px;
	color: #646464;
	text-align: center;
	position: absolute;
	top: 30px;
	left: 0;	
	user-select:none;
}

#header{
	.inner{
		overflow: hidden;
		@include inner;
		height:150px;
		a{
			float: left;
			display : inline-block;
			img{
				display: inline-block;
				margin-top: 33px;
				float: left;
				width: 120px;
				height: 63px;
			}
			span{
				color: #656565;
				font-weight: 400;
				padding: 0 10px;
				line-height: 38px ;
				float: left;
				font-size: 22px;
				margin-top: 57px;
				border-left: 2px solid #cdcdcd;
			}
		}	
		#find{
			float: left;
			margin: 53px 0 0 63px;
			width: 394px;
			height: 40px;
			border: 2px solid #cc3333;
			text-indent: 10px;
			color: #cecece;
		}
		button{
			height: 44px;
			border: none;
			background: #cc3333;
			margin-top: 53px;
			width: 56px;
			img{
				position: relative;
				top: -8px;
				right: 17px;
			}

		}
		img{
			float: right;
			margin-top: 15px;
		}
	}	
}
.redword{
	color: #cc3333;
}
#nav{
	// overflow:hidden;
	.inner{
		height: 48px;
		ul{
			color: #383838;
			font-size: 22px;
			float:left ;
			margin-left:480px;
			li{
				line-height: 48px;
				padding: 0 38px;
				float: left;
			}
		}
		img{
			display: block;
			margin-top: 15px    ;
		}
		#classify{
			position: relative;
			&:hover  #proList{
				display: block;
			}
			&:hover{
				border: 1px solid #cc3333;
				display: block;
				border-bottom: none;
				position: relative;
				background: #FFFFFF;
				line-height: 37px;
				top: 4px;
				height: 60px;
			}
			#proList{
				display: none;
				overflow: hidden;
				position: absolute;
				top: 50px;
				width: 1200px;
				height: 240px;
				left: -768px;
				background: #FFFFFF;
				z-index: 20;
				ul{
					position: relative;
					width: 239px;
					height: 79px;
					border-right: 1px solid #CCCCCC;
					border-bottom: 1px solid #CCCCCC;
					float: left;
					margin: 0;
					.til1{
						width: 239px;
						padding: 0;
						font-size: 20px;
						line-height: 40px;
						text-indent: 30px;
					}
					.til2{
						width: 239px;
						font-size: 12px;
						padding: 0;
						line-height: 30px;
						text-indent: 30px;
					}
					img{
						position: absolute;
						display: block;
						width: 45px;
						height: 45px;
						top: 15px;
						right: 20px;
						margin: 0;
					}
					p{
						text-align: center;
					}
					.pone{
						font-size: 20px;
						color: #EE5757;
					}
					.ptwo{
						font-size: 14px;
						color: #383838;
					}
				}
			}
		}
	}
}
#banner{
	height: 400px;
	background: #f13454;
	.inner{
		position: relative;
		@include inner;
		span{
			width: 25px;
			height: 32px;
			position: 	absolute;
		}
		span{
			display: none;
			width: 45px;
			height: 80px;
			position: absolute;
			top: 43%;
		}
		#right{
			right: 0;
		}
		&:hover span{
			display: block;
		}
	}
}
#sb-ft{
	overflow: hidden;
	height: 56px;
	background: #f8f8f8;
	.inner{
		@include inner;
		li{
			float: left;
			font-size: 16px;
			line-height: 56px;
			color: #383838;
			padding: 0 100px;
			img{
				position: relative;
				top: 10px;
				right: 8px;
			}
		}
	}
}
#mainer{
	width: $width;
	height: 311px;
	.inner{
		@include inner;
		// overflow:hidden;
		position:relative;
		p{
			img{
				margin-right: 8px;
				position: relative;
				top: 2px;
			}
			font-size: 22px;
			font-weight: 600;
			line-height: 22px;
			margin: 44px 0 0 23px;
		}
		#main{
			position: absolute;
			width: 560px;
			height: 260px;
			top:50px;
			left: 320px;
			border-radius: 5px;
			z-index: 3;
			img{
				display: block;
				width: 560px;
				height: 260px;
			}
		}		
		#container{
			width: 1200px;
			height: 200px;
			margin-top: 50px;
			overflow:hidden;
			position:relative;

			ul{
				position: absolute;
				left: 0;
				width:5500px;
				li{
					float: left;
					img{
						display: block;
						height: 200px;
						width: 400px;
					}
				}
			}
			span{
				display: block;
				position: absolute;
				width: 45px;
				height: 80px;
				background: rgba(0,0,0,0.2);
				overflow:hidden;
				top:64px;
				z-index:20;
				img{
					display: block;
					height: 70px;
				}
				&:hover{
					cursor: pointer;
				}

			}
			#rightBtn{
				right: 0;
				img{
					position: absolute;
					right: 0px;
				}
			}
			#cover{
				background: rgba(0,0,0,0.1);
				position: absolute;
				width: 1200px;
				height: 200px;
			}
		}
	}
}
#clockBox{
	@include  inner;
	height: 80px;
	overflow:hidden;
	.countdown{
		width: 380px;
		height: 60px;
		background: url("https://s2.ymatou.com/home/99497957ce2e3e0c500bb3ac461bfd9f.png") no-repeat;
		border-radius: 30px;
		margin: 17px 0 0 415px;
		padding-left:40px;
		%a{
			position: relative;
			top: 8px;
		}
		.title{
			i{
				width: 20px;
				height: 20px;
				margin-right: 12px;
				margin-top: 18px;
				img{
					@extend %a;
				}
			}
			color: #FFFFFF;
			font-size: 18px;
			line-height: 60px;
			margin-right: 25px;
		}
	}
	.txt{
		color: #d04a3c;
		font-size: 30px;
		@extend %a;
	}
	.time{
		display: inline-block;
		width: 40px;
		height: 40px;
		border-radius : 4px;
		background: #d0463c;
		font-size: 30px;
		text-align: center;
		color: #FFFFFF;
		@extend %a;
	}
}
#mod-hd{
	@include inner;
	margin-top:60px;
	i{
		display: inline-block;
		width: 25px;
		height: 20px;
		background: url("http://localhost:8000/static/images/za.png");
		background-position:-167px -30px ;
		margin-right: 5px;
	}
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
}
#product{
	width: $width;
	overflow: hidden;
	margin-top:20px;
	.inner{
		@include inner;
		ul{
			width:$width;
			li{
				float: left;
				width: 228px;
				height: 310px;
				margin: 10px 10px 0 0 ;
				border: 1px solid #dedede;
				img{
					display: block;
					width: 208px;
					height: 218px;
					margin: 13px 10px;
					border: 1px solid #dedede;
				}
				p{
					font-size: 14px;
					font-weight: 200;
					line-height: 18px;
					color: #383838;
					width: 208px;
					margin-left: 13px;
					//多行文本溢出显示省略号
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
				span{
					font-size:24px;
					color: #cc3333;
					text-indent: 15px;
					margin-left: 13px;
				}
			}			
		}

	}
}
#clickMore{
	@include inner;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 18px;
	color: #383838;
	margin-top: 40px;
	border: 1px solid #dedede;
	&:hover{
		cursor: pointer;
	}
}
#matou-server{
	width: $width;
	margin-top: 75px;
	background: #cc3333;
	.inner{
		@include inner;
		height: 75px;
		img{
			height: 75px;
			display: block;
			width: 1200px;
		}
		
	}
}
#bottom_list{
	width: $width;
	.inner{
		width: 1100px;
		margin: 0 auto;
		height: 240px;
		border-bottom: 1px solid #868686;
		padding:30px 0 0 100px;
		dl{
			width: 220px;
			float: left;
			dt{
				font-size: 18px;
				font-weight: 500;
				margin-bottom: 12px;
				color: #666666;
			}
			dd{
				font-size: 14px;
				line-height: 24px;
				color: #999999;
				&:hover{
					color: #0074D9;
					cursor: pointer;
				}
				span{
					position: relative;
					display: block;
					width: 90px;
					height: 28px;
					line-height: 28px;
					border:1px solid #868686;
					p{
						display: block;
						width: 22px;
						height: 20px;
						background: url(https://static.ymatou.com/images/sprites/ico-small.2014112623.png) -25px -40px;
						position: absolute;
						left: 60px;
						top: 5px;	
					}
				}
			}
		}
	}
}
#matou-intro{
	width: $width;
	height: 39px;
	.inner{
		@include  inner;
		height: 30px;
		border-bottom: 1px solid #868686;
		ul{
			margin:10px 0 0 280px;
			li{
				
				font-size: 12px;
				padding: 0 10px;
				text-align: center;
				float: left;
				border-left: 1px solid #868686;
				color: #868686;
				font-weight: 600;
			}
			.leftNone{
				border: none;
			}
		}
	}
}
#matou-link{
	width: $width;
	height: 39px;
	.inner{
		width: 1100px;
		margin: 0 auto;
		height: 76px;
		ul{
			li{
				font-size: 12px;
				padding: 0 10px;
				text-align: center;
				float: left;
				border-right: 1px solid #868686;
				color: #868686;
				margin-top: 10px;
				&:hover{
					color: #0074D9;
				}
			}
			.qijia{
				margin-left: 130px;
			}
			.rightNone{
				border: none;
			}
		}
	}
}
#fivePic{
	height: 50px;
	width: 743px;
	margin: 30px auto 10px;
	img{
		display: block;
		height: 50px;
		width: 743px;

	}
}
#copywrite{
	@include inner;
	height: 54px;
	line-height: 18px;
	font-size:12px;
	p{
		text-align: center;
		color: #666666;
	}
}
#frind_links{
	margin: 0 auto;
	height: 100px;
	width: 743px;
	overflow:hidden;
	.frind1{
		display: block;
		float: left;
		margin-left: 5px;
		width: 50px;
		height: 50px;
		background: url("https://s2.ymatou.com/top/08f215631bb50c5af9ab0f8b8ab3ae29.png") -560px 0;
	}
	.frind2{
		display: block;
		float: left;
		margin:18px 3px 0 8px;
		width: 20px;
		height: 20px;
		background: url("https://s2.ymatou.com/home/d0289dc0a46fc5b15b3363ffa78cf6c7.png");
	}
	ul{
		margin-top:20px;
		li{
			padding: 0 5px;
			font-size: 12px;
			color: #666666;
			float: left;
			span{
				display: block;
				float: left;
				width: 20px;
				height: 20px;
				background: url("https://s2.ymatou.com/home/bd90f4ad7fb3338bcf3084580325356d.png");
			}
		}
		.rightHas{
			border-right: 1px solid #868686;
		}
	}
}
#rightMenu{
	height: 100%;
	width: 35px;
	position: fixed;
	right: 0;
	top: 0;
	background: #383838;
	ul{
		display: block;
		margin-top: 250px;
		.me{
			height: 55px;
			border-bottom: 1px solid #979797;
			a{
				display: block;
				width: 17px;
				height: 17px;
				background: url("https://s2.ymatou.com/home/bd2ccc535c6ae0f5a0aeb824b98a208f.png");
				margin:17px 0 0 8px;
			}
		}
		.shopCar{
			height: 100px;
			border-bottom: 1px solid #979797;
			a{
				margin: 32px 0 0 10px;
				display: block;
				width: 17px;
				color: #ffffff;
				font-size:12px;
				i{
					position: relative;
					left: -2px;
					top: -10px;
					width: 17px;
					height: 17px;
					display: block;
					background: url("https://s2.ymatou.com/home/bd2ccc535c6ae0f5a0aeb824b98a208f.png") -17px;
				}
			}
			
		}
		.qrCode{
			height: 47px;
			border-bottom: 1px solid #979797;
			position:relative;
			i{
				display: block;
				width: 17px;
				height: 17px;
				margin: 27px 0 0 8px;
				background: url("https://s2.ymatou.com/home/bd2ccc535c6ae0f5a0aeb824b98a208f.png") -34px;
			}
			span{
				display: none;
				position:absolute ;
				top: -27px;
				right: 35px;
				width: 100px;
				height: 130px;
				background: #383838;
				img{
					display: block;
					margin: 10px 0 10px 20px;
				}
				p{
					text-align: center;
					color: #FFFFFF;
					font-size: 12px;
				}
			}
		}
		.backTop{
			height: 80px;
			span{
				display: block;
				font-size: 14px;
				color: #ffffff;
				margin-left:3px;
				line-height:40px;
				&:hover{
					cursor: pointer;
				}
				i{
					display: block;
					width: 17px;
					height: 17px;
					margin: 27px 0 0 5px;
					background: url("https://s2.ymatou.com/home/bd2ccc535c6ae0f5a0aeb824b98a208f.png") -102px;
				}				
			}

		}
	}
}




